<template>
  <div
    ref="dragWrapper"
    class="org-tree-drag-wrapper"
    @mousedown="mousedownView"
    @contextmenu="handleDocumentContextmenu"
  >
    <div
      class="org-tree-wrapper"
      :style="orgTreeStyle"
    >
      <v-org-tree
        v-if="data"
        :data="data"
        :node-render="nodeRender"
        :expand-all="true"
        collapsable
        @on-node-click="handleNodeClick"
        label-width="10"
        ref="myOrgTree"
      ></v-org-tree>
    </div>
  </div>
</template>

<script>
import { on, off } from "./tools";
// import { Dropdown, DropdownMenu, DropdownItem } from "iview";
import { posix, parse } from "path";
import VOrgTree from "../my-org-tree/org-tree";

const menuList = [
  {
    key: "edit",
    label: "编辑部门"
  },
  {
    key: "detail",
    label: "查看部门"
  },
  {
    key: "new",
    label: "新增子部门"
  },
  {
    key: "delete",
    label: "删除部门"
  }
];
export default {
  name: "OrgView",
  components: {
    // Dropdown,
    // DropdownMenu,
    // DropdownItem,
    VOrgTree
  },
  props: {
    zoomHandled: {
      type: Number,
      default: 1
    },
    data: Object
  },
  data () {
    return {
      currentContextMenuId: "",
      orgTreeOffsetLeft: 0,
      orgTreeOffsetTop: 0,
      initPageX: 0,
      initPageY: 0,
      oldMarginLeft: 0,
      oldMarginTop: 0,
      canMove: false,
      isBtnClick: false,
    };
  },
  computed: {
    orgTreeStyle () {
      return {
        transform: `translate(0%, 0%) scale(${this.zoomHandled}, ${
          this.zoomHandled
          })`,
        marginLeft: `${this.orgTreeOffsetLeft}px`,
        marginTop: `${this.orgTreeOffsetTop + 100}px`
        // marginTop: '8%',
      };
    }
  },
  methods: {
    handleNodeClick (e, data, expand) {
      // if(data.level == 3){
      //  expand();
      // this.$emit('node_click')
      // }
      if (!this.isBtnClick) {
        this.$emit("on-node-click", e, data, expand);
      } else {
        this.isBtnClick = false;
      }
    },
    closeMenu () {
      this.currentContextMenuId = "";
    },
    getBgColor (data) {
      return this.currentContextMenuId === data.id
        ? data.isRoot
          ? "#0d7fe8"
          : "#5d6c7b"
        : "";
    },
    buttonClick (key, data) {
      // console.log(data,key)
      this.$emit("on_button_click", { key, data });
      this.isBtnClick = true;
    },
    nodeRender (h, data) {
      if (data.level <= 3 && data.level != 1) {
        //非根、叶节点
        return (
          <div
            class={[
              "custom-org-node",
              data.children && data.children.length ? "has-children-label" : ""
            ]}
            on-mousedown={event => event.stopPropagation()}
            on-contextmenu={this.contextmenu.bind(data)}
            style="padding-left: 5px;padding-right: 5px;"
          >
            <el-tooltip class="item" effect="dark" content={data.label} placement="top">
              <p style="padding-top:8px;font-size:20px;font-family:'Hiragino Sans GB';color:#6a6a6a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{data.label}</p>
            </el-tooltip>
            <div class="button-container" style="padding-top:10px">
              <el-button
                circle
                size="mini"
                type="primary"
                icon="iconfont iconminusround"
                nativeOn-click={this.buttonClick.bind(this, "delete", data)}
              >
              </el-button>
              <el-button
                size="mini"
                circle
                type="primary"
                icon="iconfont iconplus-round"
                nativeOn-click={this.buttonClick.bind(this, "add", data)}
              />
              <el-button
                circle
                size="mini"
                type="primary"
                nativeOn-click={this.buttonClick.bind(this, "edit", data)}
                icon="el-icon-edit"
              >
              </el-button>
            </div>
          </div>
        );
      } else if (data.level > 3) {
        //叶节点
        return (
          <div
            class={[
              "custom-org-node",
              data.children && data.children.length ? "has-children-label" : ""
            ]}
            on-mousedown={event => event.stopPropagation()}
            on-contextmenu={this.contextmenu.bind(data)}
            style="padding-left: 5px;padding-right: 5px;"
          >
            <el-tooltip class="item" effect="dark" content={data.label} placement="top">
              <p style="padding-top:8px;font-size:20px;font-family:'Hiragino Sans GB';color:#6a6a6a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{data.label}</p>
            </el-tooltip>
            <div class="button-container" style="padding-top:10px">
              <el-button
                circle
                size="mini"
                type="primary"
                icon="iconfont iconminusround"
                nativeOn-click={this.buttonClick.bind(this, "delete", data)}
              >
              </el-button>
              <el-button
                circle
                size="mini"
                type="primary"
                nativeOn-click={this.buttonClick.bind(this, "edit", data)}
                icon="el-icon-edit"
              >
              </el-button>
            </div>
          </div>
        );
      } else if (data.level == 1) {
        //根节点
        return (
          <div
            class={[
              "custom-org-node",
              data.children && data.children.length ? "has-children-label" : ""
            ]}
            on-mousedown={event => event.stopPropagation()}
            on-contextmenu={this.contextmenu.bind(data)}
            style="padding-left: 5px;padding-right: 5px;"
          >
            <el-tooltip class="item" effect="dark" content={data.label} placement="top">
              <p style="padding-top:8px;font-size:20px;font-family:'Hiragino Sans GB';color:#6a6a6a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{data.label}</p>
            </el-tooltip>
            <div class="button-container" style="padding-top:10px">
              <el-button
                size="mini"
                circle
                type="primary"
                icon="iconfont iconplus-round"
                nativeOn-click={this.buttonClick.bind(this, "add", data)}
              />
              <el-button
                circle
                size="mini"
                type="primary"
                nativeOn-click={this.buttonClick.bind(this, "edit", data)}
                icon="el-icon-edit"
              >
              </el-button>
            </div>
          </div>
        );
      }
    },
    contextmenu (data, $event) {
      let event = $event || window.event;
      event.preventDefault
        ? event.preventDefault()
        : (event.returnValue = false);
      this.currentContextMenuId = data.id;
    },
    setDepartmentData (data) {
      data.isRoot = true;
      this.departmentData = data;
    },
    mousedownView (event) {
      this.canMove = true;
      this.initPageX = event.pageX;
      this.initPageY = event.pageY;
      this.oldMarginLeft = this.orgTreeOffsetLeft;
      this.oldMarginTop = this.orgTreeOffsetTop;
      on(document, "mousemove", this.mousemoveView);
      on(document, "mouseup", this.mouseupView);
    },
    mousemoveView (event) {
      if (!this.canMove) return;
      const { pageX, pageY } = event;
      this.orgTreeOffsetLeft = this.oldMarginLeft + pageX - this.initPageX;
      this.orgTreeOffsetTop = this.oldMarginTop + pageY - this.initPageY;
    },
    mouseupView () {
      this.canMove = false;
      off(document, "mousemove", this.mousemoveView);
      off(document, "mouseup", this.mouseupView);
    },
    handleDropdownClick (event) {
      event.stopPropagation();
    },
    handleDocumentContextmenu () {
      this.canMove = false;
    },
    handleContextMenuClick (data, key) {
      this.$emit("on-menu-click", { data, key });
    }
  },
  created () {
    // console.log("creates!!");
  },
  mounted () {
    // console.log("mounted!!!!");
    on(document, "mousedown", this.mousedownView);
    on(document, "contextmenu", this.handleDocumentContextmenu);
  },
  beforeDestroy () {
    off(document, "mousedown", this.mousedownView);
    off(document, "contextmenu", this.handleDocumentContextmenu);
  }
};
</script>
<style>
.button-container .el-button {
  font-size: 15px;
}
</style>
